$(function(){
    $('#danmu-page').height(window.screen.height * 0.8);
    // 视频监听方法
    // https://blog.csdn.net/weixin_39805195/article/details/111261036
    var danmu_page = new Vue({
        el: "#danmu-page",
        data: {
            message: '',
            video_status: 0,
        },
        mounted: function() {
            this.initialPage();
        },
        methods: {
            // 验证是否为空
            verifyEmpty: function(value) {
                if(value === undefined) { // 只能用 === 运算来测试某个值是否是未定义的
                    return false;
                }
                if(value == null) { // 等同于 value === undefined || value === null
                    return false;
                }
                // String
                if(value == "" || value == null || value == undefined){ // "",null,undefined
                    return false;
                }
                if (!value) { // "",null,undefined,NaN
                    return false;
                }
                if(!$.trim(value)){ // "",null,undefined
                    return false;
                }
                // Array
                if(value.length == 0){ // "",[]
                    return false;
                }
                if(!value.length){ // "",[]
                    return false;
                }
                // Object {}
                if ($.isEmptyObject(value)){ // 普通对象使用 for...in 判断，有 key 即为 false
                    return false;
                }
                return true;
            },
            // 弹窗提示
            responseUser: function(message, type = 'error') {
                new NoticeJs({
                    timeout: 12,// 秒级别
                    text: message,
                    position: 'topCenter',
                    type: type,
                    modal: true,
                    animation: {
                        open: 'animated bounceInRight',
                        close: 'animated bounceOutLeft'
                    }
                }).show();
            },
            // 发送弹幕
            sendDanmu: function () {
                if (this.verifyEmpty(this.message) === false) {
                    this.responseUser('弹幕信息不能为空');
                    return false;
                }

                if (this.video_status != 2) {
                    this.responseUser('视频不是播放状态');
                    return false;
                }

                if (this.message.length > 40) {
                    this.message = this.message.substr(0, 40) + '...';
                }

                // 40为弹幕高度
                var bottom = ($('#danmu1').height() - 40) * Math.random();
                var item= {
                    // 图片
                    img: 'https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=4f0023288a82b9013df8cb3746bd8541/a686c9177f3e670949c14df03bc79f3df9dc55ff.jpg',
                    info: this.message,      // 文字
                    close: true,             // 显示关闭按钮
                    speed: 10,                // 延迟,单位秒,默认6
                    color: '#0f0f0f',        // 颜色,默认白色
                    old_ie_color: '#ff0000', // ie低版兼容色,不能与网页背景相同,默认黑色
                    right: 0,
                    // href: '',  // 链接
                    bottom: bottom , // 距离底部高度,单位px,默认随机
                }
                $('#danmu1').barrager(item);
                // $('#danmu1').barrager(item);
                this.message = '';
            },
            // 初始化页面
            initialPage: function () {
                var myVideo = document.getElementById('danmu');
                myVideo.oncanplay = function(){
                    // console.log('视频准备就绪');
                    danmu_page.video_status = 1;

                };
                //监听播放开始
                myVideo.addEventListener('play',function(){
                    // console.log('视频开始播放');
                    danmu_page.video_status = 2;
                    $('.barrage_box').mouseout();
                });

                //监听播放暂停
                myVideo.addEventListener('pause',function(){
                    // console.log('视频播放暂停');
                    danmu_page.video_status = 1;
                    $('.barrage_box').mouseover();
                });

                //监听播放结束
                myVideo.addEventListener('ended',function(){
                    // console.log('播放结束');
                    danmu_page.video_status = 0;
                });

                // 使用事件监听方式捕捉事件， 此事件可作为实时监测video 播放状态
                myVideo.addEventListener("timeupdate",function(){
                    // var timeDisplay;
                    //用秒数来显示当前播放进度
                    // timeDisplay = Math.floor(myVideo.currentTime);
                    //当视频播放到 4s的时候做处理
                    // if(timeDisplay == 4){
                        //处理代码
                    // }
                },false);
            }
        }
    });
});
